<template>
  <view class="rating-list page-background">
    <CustomNavbar title="我的评分" :isBack="true" />
    
    <!-- 空状态提示 -->
    <view v-if="!ratingStore.ratingList.length && !isLoading" class="empty-state">
      <u-empty text="暂无评分记录" mode="list"></u-empty>
    </view>
    
    <!-- 评分列表 -->
    <view v-else class="content">
      <navigator
        v-for="(item,index) in ratingStore.ratingList"
        :key="item._id+String(index)"
        :url="`/pages/preview/index?id=${item._id}`"
        open-type="navigate"
        hover-class="navigator-hover"
      >
        <view class="rating-item">
          <u-image
            width="100%"
            height="540rpx"
            :src="item.smallPicurl"
            shape="square"
            border-radius="20rpx"
            mode="aspectFill"
          >
            <template #loading><u-loading /></template>
            <template #error><view style="font-size:24rpx">加载失败</view></template>
          </u-image>
          <!-- 评分标记 -->
          <view class="rating-badge" v-if="item.userScore">
            <u-rate 
              :value="item.userScore" 
              :count="item.userScore"
              :disabled="true"
              size="20"
            ></u-rate>
            <text class="score-text">{{ item.userScore }}星</text>
          </view>
        </view>
      </navigator>
    </view>

    <!-- 加载更多 -->
    <u-loadmore
      v-if="ratingStore.ratingList.length > 0"
      bg-color="rgb(240,240,240)"
      :status="loadStatus"
      @loadmore="loadMoreData"
    />
    
    <!-- 返回顶部 -->
    <u-back-top :scroll-top="scrollTop" />
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { onPageScroll } from '@dcloudio/uni-app'
import { useRatingStore } from '@/stores/rating'
import { $u } from 'uview-pro'
import CustomNavbar from '@/components/UI/custom.vue'

/* ---------- 响应式数据 ---------- */
const isLoading = ref(false)
const scrollTop = ref(0)

/* ---------- store ---------- */
const ratingStore = useRatingStore()

/* ---------- 计算属性 ---------- */
const loadStatus = computed(() => {
  if (isLoading.value) return 'loading'
  if (!ratingStore.hasMore) return 'nomore'
  return 'loadmore'
})

/* ---------- 滚动监听 ---------- */
onPageScroll(e => scrollTop.value = e.scrollTop)

/* ---------- 加载更多数据 ---------- */
const loadMoreData = async () => {
  if (isLoading.value || !ratingStore.hasMore) return
  
  isLoading.value = true
  ratingStore.nextPage()
  
  try {
    await loadRatingData()
  } catch (error) {
    console.error('加载更多失败:', error)
    $u.toast('加载失败，请重试')
  } finally {
    isLoading.value = false
  }
}

/* ---------- 加载评分数据 ---------- */
const loadRatingData = async () => {
  // 这里可以实现从本地存储或其他数据源加载评分记录
  // 目前使用store中的数据，后续可以根据需要扩展
  
  // 如果当前数据量小于总数，可以继续加载
  if (ratingStore.ratingList.length < ratingStore.total) {
    // 这里可以实现具体的数据加载逻辑
  }
}

/* ---------- 页面初始化 ---------- */
onMounted(() => {
  // 页面加载时重置分页
  if (ratingStore.pageNum > 1) {
    ratingStore.resetPagination()
  }
  
  // 如果本地有评分数据，加载第一页
  if (ratingStore.ratingList.length === 0 && ratingStore.total > 0) {
    loadRatingData()
  }
})
</script>

<style scoped lang="scss">
@import '@/common/style/page-background.scss';

.rating-list {
  min-height: 100vh;
  
  .empty-state {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60vh;
  }
  
  .content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5rpx;
    padding: 10rpx;
  }
  
  .rating-item {
    position: relative;
    
    .rating-badge {
      position: absolute;
      top: 10rpx;
      right: 10rpx;
      background: rgba(0, 0, 0, 0.7);
      border-radius: 20rpx;
      padding: 8rpx 12rpx;
      display: flex;
      align-items: center;
      gap: 6rpx;
      
      .score-text {
        color: #fff;
        font-size: 22rpx;
        font-weight: bold;
      }
    }
  }
}
</style>